
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


ul,ol{
list-style: none;
}
*{
margin: 0;
padding: 0;
}





#xxx{
background: #fff;
display: block;
position: fixed;
left: 0;
top: 0;
}
html{


}
body{
 


/* overflow: hidden; */

/* 手机端禁用滚动  效果不佳 用js禁用 */
}  

/* 初始状态  画笔是none */

.actions{
position: fixed;
left:0;
top: 0;
padding: 20px;
} 




.actions  svg{
width: 1.6em;
height: 1.6em;
margin: 0 10px;
transition: all 0.3s;
cursor: url("./pen.png"), default;
}

.pen.active{
/* fill: red; */
transform: scale(1.2);
cursor: url("./pen.png"), default;
}

.eraser.active{
  fill: red;
  transform: scale(1.2);
  cursor: url("./eraser.png"), default;
}

.clear.active{
   fill: red;
   transform: scale(1.2);
}

.download.active{
  fill: red;
  transform: scale(1.2);
}

.colors{
position: fixed;
left: 30px;
top: 60px;

}
.colors > li{
width: 20px;
height: 20px;

box-shadow: 0 0 3px rgba(0,0,0,0.25);
margin: 10px 0;
border-radius: 50%;
transition: all 0.3s;
}


.colors > li.black{
  background: black;
  }
.colors > li.red{
background: red;
}


.colors > li.green{
background: green;
}


.colors > li.blue{
background: #4242B6;
}

.colors > li.yellow{
  background: yellow;
}

.colors > li.yellowgreen{
  background: yellowgreen;
}

.colors > li.hui{
  background: #e4e4e4;
}

.colors > li.lan{
  background: #1BE6ED;
}


.colors > li.active{
box-shadow: 0 0 3px rgba(0,0,0,0.95);
transform: scale(1.2);
}



.sizes{
position: fixed;
right: 28px;
top: 20px;

}
.sizes>li{
margin: 20px 0;
}

.sizes > .thin{
height: 0;
width:25px;
border-top: 4px solid;
}
.sizes > .thin.active{
  box-shadow: 0 0 3px rgba(0,0,0,0.95);
  transform: scale(1.2);
} 

.sizes > .thick{
height: 0;
width:25px;
border-top: 10px solid;
}
.sizes > .thick.active{
  box-shadow: 0 0 3px rgba(0,0,0,0.95);
  transform: scale(1.2);
}







